import React, { Component } from 'react';
import './表单.css'
const data=[
  {
    label:'线上活动',
    name:'线上活动',
    checked:true//是否选中
  },
  {
    label:'推广类',
    name:'推广类',
    checked:false//是否多选
  },
  {
    label:'线下活动',
    name:'线下活动',
    checked:false
  }
]
class DemoForm extends Component {
  state={
    title: "前端技术前端发展讨论会",
    tel:"",
    desc: "",
    sex: "",//赞助商
    city: "北京",
    enddata:"",//结束日期
    data:"",//开始日期
  }
  //输入框活动名称
    update=(e)=>{
        this.setState({
            title:e.target.value
        })
    }
    //复选框城市
    city=(e)=>{
        this.setState({
            city:e.target.value
        })
    }
    //日期输入框
      update=(e)=>{
        this.setState({
            data:e.target.value
        })
      }
      updateend=(e)=>{
          this.setState({
              enddata:e.target.value
          })
      }
    // 电话
    getphoto = (e) => {
      this.setState({
          tel: e.target.value
        })
    }
    // 活动类型
    classtype=(e,index)=>{
        if (e.target.type === 'checkbox') {
            data[index].checked = !data[index].checked
        }
        let name = e.target.name
        let value = e.target.value
        this.setState({
            [name]: value
        })
        console.log(data);
    }
    // 活动赞助商
    sponsor=(e)=>{
        this.setState({
            sex:e.target.value
        })
    }
    // 描述
    Chandesc=(e)=>{
        this.setState({
            desc:e.target.value
        })
    }
  // handleMsg=(e)=>{
  //   // console.log(this.state.msg,e.target.value);
  //   this.setState({
  //     title: e.target.value
  //   })
  // }
  // // 描述信息
  // handleDesc=(e)=>{
  //   this.setState({
  //     desc:e.target.value
  //   })
  // }
  // handleInput=(e,index)=>{
  //   if(e.target.type==='checked'){
  //     data[index].checked=!data[index].checked
  //   }
  //   let name=e.target.name
  //   let value=e.target.value
  //   this.setState({
  //     [name]:value
  //   })
  //   console.log('checkbox',data,this.state);
  // }
  // 提交表单信息
  submitData=(e)=>{
    e.preventDefault()
      console.log(this.state);
    }
  render() { 
    return ( 
      <div className='form'>
          <form onSubmit={this.submitData}>
            <h2>案例-form表单相关集合</h2>
              {/* 活动名称 */}
            <div className='float'>
                <div className='item'>活动名称</div>
                <div>
                    <input className="acticity_input" type="text" value={this.state.acticity_name} />
                </div>
            </div>
           
            {/* 城市 */}
            <div className=" float">
              <div className="right">
                  城市
              </div>
              <div className="">
                 <select className='' value={this.state.city} onChange={this.city} >
                    <option value="北京">北京</option>
                    <option value="上海">上海</option>
                    <option value="河北">河北</option>
                  </select>
               </div>
            </div>
             {/* 日期 */}
            <div className='float'>
                <div className="">
                    日期：
                </div>
                <div className="">
                  <input type="date" className='' onChange={this.update} value={this.state.data} /> - <input type="date"  onChange={this.updateend} className='' value={this.state.enddata} />
                </div>
            </div>
            {/* 报名电话 */}
            <div className="float">
              <div className="form-left">报名电话:</div>
              <div>
                <input type="text" placeholder='请输入手机号' value={this.state.tel} onChange={(e) => { this.getphoto(e) }} />
              </div>
            </div>     
            {/* 活动类型 */}
            <div className='float'>
                <div className="right">
                    活动类型
                </div>
                <div>
                  {
                    data.map((item, key) => {
                      return (
                        <label key={key}>
                            <input type="checkbox" checked={item.checked} name={item.name} onChange={(e) => this.classtype(e, key)} />{item.label}
                      </label>
                      )
                    })
                  }
                </div>
            </div>
            {/* 活动赞助商 */}
            <div className="float">
              <div className="right">
                  活动赞助商
              </div>
              <div>
                <label><input type="radio"value="1" checked={this.state.sex==="1"} onChange={this.sponsor} />男</label>
                <label><input type="radio" value="2" checked={this.state.sex==="2"} onChange={this.sponsor} />女</label>
              </div>
            </div>      
            {/* 描述 */}  
            <div className="float">
              <div className="right">
                  描述
              </div>
              <div>
                  <textarea value={this.state.desc}  rows="3" cols="30" onChange={this.Chandesc}></textarea>
              </div>
             </div>
            {/* 按钮区域 */}
            <div className="button">
              <button className="submit" onClick={this.sub}>提交</button>
               <button className="reset">重置</button>
            </div>



            {/* <div className='item'>
                <h3>1.input</h3>
                {this.state.msg}
                <input type='text' value={this.state.title} placeholder='请输入内容' onChange={this.handleMsg}></input>
            </div> */}
            {/* <div className='item'>
                <h2>2.textarea</h2>
                <textarea rows='6' cols='20' value={this.state.desc} placeholder='请输入描述内容' onChange={this.handleDesc}></textarea>
            </div> */}
            {/* <div className='item'>
                <h2>2.textarea</h2>
                {
                  data.map((item,key)=>{
                    <label key={key}>
                        <input type="checkbox" checked={item.checked} name={item.name} value={item.value} onChange={this.handleInput} />{item.label}
                    </label>
                  }) 
                }
               
            </div> */}

          </form>
      </div>
    );
  }
}
 
export default DemoForm;  